<template>
	<view>
		<uni-nav-bar left-icon="back" left-text="返回" right-icon='search'>
			<input placeholder="请搜索" />
		</uni-nav-bar>
		<scroll-view scroll-top="scrollTop" scroll-y="true" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
			<view class="uni-list">
				<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(order,index) in orders" :key="index">
					<view class="uni-media-list" @click="goOrderDetail(order.id)">
						<image class="uni-media-list-logo" v-bind:src="order.storeLogoUrl"></image>
						<view class="uni-media-list-body">
							<view class="uni-media-list-text-top">{{order.storeName}}</view>
							<view class="uni-media-list-text-bottom uni-ellipsis">订单ID:{{order.id}}</view>
						</view>
						<view class="uni-media-list-body">
							<view class="uni-media-list-text-top">{{order.price}}</view>
							<view class="uni-media-list-text-bottom">订单状态：{{order.status}}</view>
						</view>
						<button type="primary">支付</button>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import uniNavBar from '../../components/uni-nav-bar/uni-nav-bar.vue';


	export default {
		components: {
			uniNavBar
		},
		data() {
			return {
				orders: [],
				scrollTop: 0,
				old: {
					scrollTop: 0
				}
			}
		},
		onLoad: function() {
			uni.request({
				url: this.baseUrl + '/order/listByCustomerUserId?customerUserId=1',
				method: 'GET',
				data: {},
				success: res => {
					console.log(res);
					this.orders = res.data.data;
				},
				fail: () => {},
				complete: () => {}
			});
		},
		methods: {
			goOrderDetail: function(orderId) {
				uni.navigateTo({
					url: '../orderDetail/orderDetail?orderId=' + orderId
				});
			},
			upper: function(e) {
				console.log(e)
			},
			lower: function(e) {
				console.log(e)
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				})
			}
		}

	}
</script>

<style>
	.uni-media-list-body {
		height: 110upx;
	}
</style>
